<template>
	<div>
		<el-dropdown
			:size="size"
			:type="type"
			trigger="click"
			@command="onClickEvent"
		>
			<el-button :type="type" :size="size" class="el-dropdown-link">
				更多<i class="el-icon-arrow-down el-icon--right"></i>
			</el-button>
			<el-dropdown-menu slot="dropdown">
				<el-dropdown-item
					v-for="(item, index) in operationTypeList"
					:key="index"
					:command="item.interfaceKeyName"
					:divided="item.divided"
					:style="{textDecoration: !getPermission([`${permissionPrefix}:${item.permissionSign}`]) ? 'line-through' : ''}"
					:disabled="!getPermission([`${permissionPrefix}:${item.permissionSign}`]) || !setStatus(item)"
				>
					<span :class="item.icon" class="item-gap"></span>
					<span>{{ item.name }}</span>
				</el-dropdown-item>
			</el-dropdown-menu>
		</el-dropdown>
	</div>
</template>
<script>
    import permissionMixin from '../../../mixins/permission-mixin';

    export default {
        name: 'JkMoreButton',
        components: {},
        mixins: [permissionMixin],
        props: {
            permissionPrefix: {
                type: String,
                default: ''
            },
            disabled: {
                type: Boolean,
                default: false
            },
            hasPermission: {
                type: Boolean,
                default: true
            },
            size: {
                type: String,
                default: 'small'
            },
            type: {
                type: String,
                default: 'text'
            },
            rowData: {
                type: Object,
                default() {
                    return {};
                }
            }
        },
        data() {
            return {
                selectItem: '',
                // permissionSign: 权限标识；interfaceKeyName: 接口键名
                operationTypeList: [
                    {
                        name: '提交',
                        permissionSign: 'submit',
                        interfaceKeyName: 'submit',
                        icon: 'el-icon-document-checked',
                        divided: false
                    },
                    {
                        name: '撤销提交',
                        permissionSign: 'submit',
                        interfaceKeyName: 'cancelSubmit',
                        icon: 'el-icon-back',
                        divided: false
                    },
                    {
                        name: '审核',
                        permissionSign: 'audit',
                        interfaceKeyName: 'audit',
                        icon: 'el-icon-coordinate',
                        divided: true
                    },
                    {
                        name: '撤销审核',
                        permissionSign: 'audit',
                        interfaceKeyName: 'cancelAudit',
                        icon: 'el-icon-bottom-left',
                        divided: false
                    },
                    {
                        name: '关闭',
                        permissionSign: 'close',
                        interfaceKeyName: 'close',
                        icon: 'el-icon-close',
                        divided: true
                    },
                    {
                        name: '撤销关闭',
                        permissionSign: 'close',
                        interfaceKeyName: 'cancelClose',
                        icon: 'el-icon-d-arrow-left',
                        divided: false
                    }
                ]
            };
        },
        methods: {
            setStatus(item) {
                let show = false;
                if (item.name === '提交') {
                    if (Number(this.rowData.auditState) === 1) show = true;
                } else if (item.name === '撤销提交') {
                    if (Number(this.rowData.auditState) === 2) show = true;
                } else if (item.name === '审核') {
                    if (Number(this.rowData.auditState) === 2) show = true;
                } else if (item.name === '撤销审核') {
                    if (Number(this.rowData.auditState) === 3) show = true;
                } else if (item.name === '关闭') {
                    if (Number(this.rowData.auditState) === 3) show = true;
                } else if (item.name === '撤销关闭') {
                    if (Number(this.rowData.auditState) === 4) show = true;
                }
                return show;
            },
            returnData(e, auditFormData = {}) {
                this.$emit('on-confirm', {
                    interfaceKeyName: e,
                    auditFormData: {
                        ...auditFormData
                    }
                });
            },
            onClickEvent(e) {
                this.selectItem = e;
                const str = this.operationTypeList.find(x => x.interfaceKeyName === e).name;
                this.$confirm(`确认 "${str}" ？`, {
                    title: '提示',
                    iconClass: 'el-icon-question'
                })
                    .then(res => {
                        if (res === 'confirm') {
                            this.returnData(e, {});
                        }
                    })
                    .catch(_ => {});
            }
        }

    };
</script>
